{% extends "level_base.html" %}

{% block form %}
  {% if information %}
    <br/>
    <h4>Instructions:</h4>
    {{ information }}
  {% endif %}
  <h4>Guess my card:</h4><img src='/images/card_back.png'>
  <h4>What is your bet?</h4>
  <form action="/level4" method="post" name="bet_form" onsubmit="return validateBets()">
    <span id="color_span">
      <input type="text" name="bet_color" value="0" />
      <input type="radio" name="color_guess" checked value="0" /> Black
      <input type="radio" name="color_guess" value="1" /> Red
    </span>
    <br/>
    <span id="suit_span">
      <input type="text" name="bet_suit" value="0" />
      <input type="radio" name="suit_guess" checked value="0" /> Spade
      <input type="radio" name="suit_guess" value="1" /> Club
      <input type="radio" name="suit_guess" value="2" /> Diamond
      <input type="radio" name="suit_guess" value="3" /> Heart
    </span>
    <br/>
    <span id="rank_bet_span">
      <input type="text" name="bet_rank" value="0" onchange="showRanks()"/>
    </span>
    <span id="rank_guess_image_span" style="display:none">
      <img name="rank_guess_image" src="/images/card_0.png">
    </span>
    <span id="ranks_image_span" style="display:none">
      <br/>
      {% for image in rank_images %}
        <a href="#" id={{ forloop.counter0 }} 
      	 		onClick="return updateRankValue(this.id)"><img src="{{ image }}"></a>
      {% endfor %}
    </span>
    <br/>
    <span id="card_bet_span">
      <input type="text" name="bet_card" value="0" onchange="showCards()"/>
    </span>
    <span id="card_guess_image_span" style="display:none">
      <img name="card_guess_image" src="/images/card_0.png">
    </span>
    <span id="cards_image_span" style="display:none">
      <br/>
      {% for image in card_images %}
        <a href="#" id={{ forloop.counter0 }} 
      	 		onClick="return updateCardValue(this.id)"><img src="{{ image }}"></a>
      {% endfor %}
    </span>
    <div id="guess_div"><input type="hidden" name="rank_guess" value=-1 /></div>
    <div id="guess_div"><input type="hidden" name="card_guess" value=-1 /></div>
    <div id="submit_div"><input type="submit" name="submit_button" value="Submit"></div>
  </form>
{% endblock form %}

{% block result %}
  {% if result_image %}
    <span>The card was: <img src="{{ result_image }}"></span>
  {% endif %}
  {% if result_messages %}
  	{% for result_message in result_messages %}
      <h4>{{ result_message }}</h4>
    {% endfor %}
  {% endif %}
{% endblock result %}